<template>
    <div class="search-page">
        <!-- Header -->
        <Header title="搜索">
            <template v-slot:back>
                <span @click="$router.go(-1)">&lt;</span>
            </template>
        </Header>

        <!-- 搜索框 -->
        <div class="input-box">
            <input type="text" placeholder="输入商家" v-model="searchText" @input="search">
        </div>

        <!-- 展示搜索结果 -->
        <div class="list">
            <router-link :to="{name:'shopdetail',params: item }" class="item" v-for="(item,index) in resultlist" :key="index">
                <div class="pic">
                    <img :src="item.pic" alt="">
                </div>
                <div class="text">
                    <div class="name">{{item.name}}</div>
                    <div>月售: {{item.buyCount}}</div>
                    <div>描述: {{item.desc}}</div>
                </div>
            </router-link>
        </div>
    </div>

</template>

<script>

export default {
    data(){
        return {
            shoplist:[],//源数据
            resultlist:[],//搜索结果
            searchText:''//搜索文本
        }
    },
    mounted(){
        this.shoplist = this.$route.params.shoplist;
    },
    methods:{
        search(){//搜索,并保存搜索结果到  resultlist
            console.log(this,this.shoplist, this.shoplist.filter((item)=>{
                return item.name.includes( this.searchText );
            }));

            if(this.searchText.trim())
            this.resultlist = this.shoplist.filter((item)=>{
                return item.name.includes( this.searchText );
            })
        }
    }
}
</script>
<style scoped >
    .input-box{
    background-color: #f0f0f0;
    padding:  20px;
  }
  .input-box input{
    background-color: white;
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    outline: none;
    border: none;
    line-height: 50px;
    border-radius: 25px;
    text-align: center;
  }

  .list .item{
    text-decoration: none;
    color: #333;
    font-size: 14px;
    display: flex;
    margin: 20px ;
  }
  .list .item .pic{
    width: 80px;
    margin-right: 20px;
  }
  .list .item .pic img{
    width: 100%;
  }
  .list .item .text{
    flex: 1;;
  }
  .list .item .text .name{
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
  }
</style>